<template>
  <div class="ablaze_nav">
    <div class="ablaze_nav--left" :class="showNavLeft ? '' : 'noWidth'">
      <div class="ablaze_nav--title"><img src="../assets/rainbow.png" alt="" style="width: 100%"></div>
      <div>
        <a-menu id="menu" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" @click="handleClick" :class="showNavLeft ? '' : 'noWidth'">
          <subMenu
              v-for="menu in menList"
              :key="menu.path"
              :menu="menu"
          ></subMenu>
        </a-menu>
      </div>
    </div>
    <div class="ablaze_nav--right" :class="showNavLeft ? '' : 'noPadding'">
      <div class="ablaze_nav--top">
        <a-button @click="changeNav" type="primary" class="ablaze_nav--button">
          <template #icon>
            <MenuFoldOutlined v-if="showNavLeft"/>
            <MenuUnfoldOutlined v-else/>
          </template>
        </a-button>
        <User />
      </div>
      <div class="ablaze_nav--main" id="frame" :class="showNavLeft ? '' : 'noLeft'">

      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {ref, defineComponent, computed , watch} from "vue";
import SubMenu from './main-sidebar-sub-menu.vue'
import User from "./User.vue";
import {
  MailOutlined,
  QqOutlined,
  AppstoreOutlined,
  SettingOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from "@ant-design/icons-vue";
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default defineComponent({
  name: "MainNav",
  components: {
    SubMenu,
    MailOutlined,
    QqOutlined,
    AppstoreOutlined,
    SettingOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    User
  },
  setup: () => {
    const title = ref("ablaze_nav");
    const selectedKeys = ref<string[]>([location.pathname]);
    const openKeys = ref<string[]>(['']);
    let showNavLeft = ref(true);
    const store = useStore();
    const menList = computed(() => store.state.currentUser.route);
    watch(menList,(newVal,oldVal)=>{
      console.log(newVal);
    })
    function changeNav() {
      showNavLeft.value = !showNavLeft.value;
    }
    const router=useRouter()
    const handleClick = (e: Event) => {
      console.log("click", e);
    };
    watch(selectedKeys,(newVal,oldVal)=>{
      console.log(newVal,newVal[0])
      router.push({
        path : newVal[0]
      })
    })
    const titleClick = (e: Event) => {
      console.log("titleClick", e);
    };
    return {
      menList,
      title,
      showNavLeft,
      openKeys,
      selectedKeys,
      changeNav,
      titleClick,
      handleClick,
    };
  },
});
</script>

<style scoped lang="less">
.ablaze_nav {
  position: relative;
  height: 100vh;
  width: 100%;
  user-select: none;

  .ablaze_nav--left {
    width: 256px;
    position: absolute;
    top: 0;
    box-shadow: 10px 0px 17px rgb(72 72 72 / 10%);
    height: 100%;
    bottom: 0;
    transition: all 0.3s;
    z-index: 1;

    .ablaze_nav--title {
      text-align: center;
      line-height: 70px;
      font-size: 20px;
      font-weight: 700;
      color: #6d61ea;
      letter-spacing: 0.05em;
    }
  }

  .noWidth {
    width: 0px !important;

    /deep/ .ant-menu-submenu-title,
    /deep/ .ant-menu-item {
      transition: all 0.3s;
      padding: 0 !important;
    }
  }

  .ablaze_nav--right {
    padding-left: 256px;
    width: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;

    .ablaze_nav--top {
      flex: 1;
      height: 60px;
      width: 100%;
      padding: 20px;
      background-color: #ffffff;
      box-shadow: 10px 0px 17px rgb(72 72 72 / 20%);
      z-index: 2;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .ablaze_nav--button {
    }

    .ablaze_nav--main {
      flex: 1;
      z-index: 200;
      position: absolute;
      top: 80px;
      left: 256px;
      right: 0;
      bottom: 0;
      transition: all .5s;
      background-color: #FFFFFF;
      margin: 15px;
    }

    .noLeft {
      left: 0px;
    }
  }

  .noPadding {
    padding-left: 0px;
  }
}
</style>
